// 放大镜功能
(function () {
    const img_wrapper = document.querySelector(".img_wrapper");
    const layer = document.querySelector(".layer");
    const zoom_wrapper = document.querySelector('.zoom_wrapper')
    img_wrapper.addEventListener("mousemove", (e) => {
        let mx = e.clientX - img_wrapper.getBoundingClientRect().x - layer.offsetWidth / 2
        let my = e.clientY - img_wrapper.getBoundingClientRect().y - layer.offsetHeight / 2
        if (my < 0) {
            my = 0
        }
        if (mx < 0) {
            mx = 0
        }
        if (mx > img_wrapper.offsetWidth - layer.offsetWidth) {
            mx = img_wrapper.offsetWidth - layer.offsetWidth
        }
        if (my > img_wrapper.offsetHeight - layer.offsetHeight) {
            my = img_wrapper.offsetHeight - layer.offsetHeight
        }
        layer.style.top = my + 'px'
        layer.style.left = mx + 'px'
        // 因为背景图是二倍图 所以坐标需要乘以2
        zoom_wrapper.style.backgroundPosition = `${-2*mx}px ${-2*my}px`
    });

    img_wrapper.addEventListener("mouseenter", () => {
        layer.style.display = "block";
        zoom_wrapper.style.display = "block";
    });

    img_wrapper.addEventListener("mouseleave", () => {
        layer.style.display = "none";
        zoom_wrapper.style.display = "none";
    });

}());

// 鼠标经过改变商品图片
(function () {
    const ul = document.querySelector('.imgs>ul')
    ul.children[0].children[0].classList.add('selected')
    const img = document.querySelector('.img_wrapper>img')
    const zoom_wrapper = document.querySelector('.zoom_wrapper')
    ul.addEventListener('mouseover', function (e) {
        if (e.target.tagName === 'IMG') {
            img.src = e.target.src
            zoom_wrapper.style.backgroundImage = `url(${img.src})`
            document.querySelector('.goodsImgs_wrapper .goodsImgs .imgs>ul li img.selected').classList.remove('selected')
            e.target.classList.add('selected')
        }
    })
}());


// 实现选择规格模块
function selected(e, str) {

    if (e.target.classList.contains('selected')) {
        e.target.classList.remove('selected')
        return
    }
    document.querySelector(str) ? document.querySelector(str).classList.remove('selected') : ''
    e.target.classList.add('selected')

}
(function () {
    const specification = document.querySelector('.specification')
    specification.addEventListener('click', function (e) {
        if (e.target.tagName === 'IMG') {
            selected(e, '.goodsIntroduce .goodsInfo .specification img.selected')
            price_render()
        }
        if (e.target.parentNode.parentNode.className === 'g_size') {
            if (e.target.innerHTML === '20cm') {
                return
            }
            selected(e, '.goodsIntroduce .goodsInfo .specification .size.selected')
            price_render()
        }
        if (e.target.parentNode.parentNode.className === 'g_producer') {
            selected(e, '.goodsIntroduce .goodsInfo .specification .producer.selected')
            price_render()
        }
    })
}());


// 实现数量的加减
(function () {
    const operate = document.querySelector('.goodsIntroduce .goodsInfo .specification .operate')
    operate.addEventListener('click', (e) => {
        let num = operate.children[1].innerHTML
        if (e.target.tagName === 'A') {
            if (e.target.innerHTML === '-') {
                if (operate.children[1].innerHTML <= 1) {
                    return
                }
                num--
                operate.children[1].innerHTML = num
            } else if (e.target.innerHTML === '+') {
                num++
                operate.children[1].innerHTML = num
            }
        }
    })
}());




// 价格的渲染功能
function price_render() {
    const lightHight = document.querySelectorAll('.specification .selected')
    const g_price = document.querySelector('.goodsIntroduce .goodsInfo .goodsText .g_price')
    const img_color = document.querySelector('.goodsIntroduce .goodsInfo .specification .g_img>div')
    try {
        if (lightHight[0] == img_color.children[0]) {
            if (lightHight[1].innerHTML === '30cm') {
                if (lightHight[2].innerHTML === '日本') {
                    g_price.children[0].children[1].innerHTML = '166.00'
                    g_price.children[1].children[1].innerHTML = '200.00'
                } else {
                    g_price.children[0].children[1].innerHTML = '176.00'
                    g_price.children[1].children[1].innerHTML = '210.00'
                }
            } else if (lightHight[1].innerHTML === '10cm') {
                if (lightHight[2].innerHTML === '日本') {
                    g_price.children[0].children[1].innerHTML = '176.00'
                    g_price.children[1].children[1].innerHTML = '210.00'
                } else {
                    g_price.children[0].children[1].innerHTML = '196.00'
                    g_price.children[1].children[1].innerHTML = '230.00'
                }
            }

        } else {
            if (lightHight[1].innerHTML === '30cm') {
                if (lightHight[2].innerHTML === '日本') {
                    g_price.children[0].children[1].innerHTML = '166.00'
                    g_price.children[1].children[1].innerHTML = '200.00'
                } else {
                    g_price.children[0].children[1].innerHTML = '186.00'
                    g_price.children[1].children[1].innerHTML = '220.00'
                }
            } else if (lightHight[1].innerHTML === '10cm') {
                if (lightHight[2].innerHTML === '日本') {
                    g_price.children[0].children[1].innerHTML = '186.00'
                    g_price.children[1].children[1].innerHTML = '220.00'
                } else {
                    g_price.children[0].children[1].innerHTML = '166.00'
                    g_price.children[1].children[1].innerHTML = '200.00'
                }
            }
        }
    } catch (error) {

    }
}


// 实现加入购物车模块的判断
(function () {
    const add_shopcar = document.querySelector('.addShopingCar')
    let goodsArr = JSON.parse(localStorage.getItem('goodsList')) || []
    add_shopcar.addEventListener('click', () => {
        const lightHight = document.querySelectorAll('.specification .selected')
        goodsArr = JSON.parse(localStorage.getItem('goodsList')) || []
        if (lightHight.length == '3') {
            const specificationGoods = [...lightHight].map(item => item.innerHTML)
            specificationGoods[0] = lightHight[0].dataset.name
            // 获取商品名称加入数组中
            specificationGoods.unshift(document.querySelector('.goodsIntroduce .goodsInfo .goodsText .g_name').innerHTML)
            // 获取图片路径加入数组中
            specificationGoods.push(document.querySelector('.goodsImgs_wrapper .goodsImgs .img_wrapper img').src)
            // 获取商品价格加入数组中
            specificationGoods.push(document.querySelector('.current_price>span').innerHTML)
            // 获取商品数量加入数组中
            specificationGoods.push(document.querySelector('.goodsIntroduce .goodsInfo .specification .operate span').innerHTML)
            // 将该数组封装为一个对象
            const goodsObj = {
                'name': specificationGoods[0],
                'attrsText': `颜色：${specificationGoods[1]}  尺寸：${specificationGoods[2]}  产地： ${specificationGoods[3]}`,
                'picture': specificationGoods[4],
                'price': specificationGoods[5],
                'selected': true,
                'count': specificationGoods[6]
            }
            // 将该对象存储在本地中
            goodsArr.push(goodsObj)
            localStorage.setItem('goodsList', JSON.stringify(goodsArr))
            shoppingCarShow()
            shoppingCarRender(goodsArr)


            // 修改弹窗样式
            document.querySelector('.modal .modal-content').innerHTML = '已加入购物车'
            document.querySelector('.modal').style.color = '#67c23a'
            document.querySelector('.modal').style.backgroundColor = '#eef7e9'
            document.querySelector('.modal').style.display = 'block'

        } else {
            document.querySelector('.modal').style.display = 'block'
        }
    })
}());

//实现弹窗
alertDiy()

function alertDiy(str) {
    if (document.querySelector('.modal')) {
        return
    }
    var modal = document.createElement("div");
    modal.setAttribute("class", "modal");

    var modalContent = document.createElement("div");
    modalContent.setAttribute("class", "modal-content");

    modal.appendChild(modalContent);
    modalContent.innerHTML = '请选择商品规格'
    document.body.appendChild(modal);
    document.getElementById("openModal").addEventListener("click", function () {
        modal.style.display = str;
        setTimeout(function () {
            modal.style.display = "none";
            // 三秒后将弹窗样式复原
            document.querySelector('.modal').style = ''
            document.querySelector('.modal .modal-content').innerHTML = '请选择商品规格'
        }, 3000); // 3秒自动关闭
    });
}